<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="个人信息" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="bg-white uni-flex p030 boxsiz ac p40 mt30">
			<view class="avatar">
				<image mode="aspectFill" :src="userInfo.headerPic || 'https://green-leader.oss-cn-hangzhou.aliyuncs.com/common/%E5%8F%8B%E6%AD%A5%E9%A2%86%E9%98%9Flogo.png'"></image>
			</view>
			<view class="flex1">
				<view class="font_size_36 b-font mb40">{{userInfo.nickName || '友步领队'}}</view>
				<view class="uni-flex">
					<text class="mr20 gender">年龄&nbsp;&nbsp; {{userInfo.age || 25}}岁<text class="gender-icon color-blue b-font" v-if="userInfo.sex === 0">♂</text>
					<text class="gender-icon color-red b-font" v-if="userInfo.sex === 1">♀</text></text>
					<view class="uni-flex sp_betw ml100" @tap="navgetTo('pages/my/edit_info',userInfo,'')">
						<uni-icons type="compose" size="16" color="#666"></uni-icons>
						<text class="">编辑</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 签名区域 -->
		<view class="bg-white uni-flex p30 boxsiz mt30">
			<view class="mr40">签名</view>
			<view class="flex1">{{userInfo.signature || '这是签名这是签名这是签名这是签名这是签名这是签名 签名这是签名这是签名这是签名这是签名这是签名这是签名这是签名这是签名这是签名'}}</view>
		</view>
	</view>
</template>

<script>
	// 注入全局变量
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	export default {
		components: {
		},
		data() {
			return {
				userInfo: {
					mobile: "",
					showMobile: "",
					nickName: "",
					signature: '',
					sex: 0,
					headerPic:"",
					age:0,
					memberAccount:""
				},
			}
		},
		computed:{
		},
		onLoad(opt) {
			this.getUserInfo();
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/my/my',
					success() {
						var page = getCurrentPages().pop();
						if (page == undefined || page == null) return;
						page.onLoad();
					}
				})
			},
			// 获取用户信息
			getUserInfo(){
				api.getUserInfo().then(res => {
					if (res.code === 0 && res.data) {
						this.userInfo = res.data;
					}
				}).catch(error => {
					console.error('获取用户信息失败:', error);
				})
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 用户信息区域 */
	.avatar {
		width: 278rpx;
		height: 278rpx;
		text-align: right;
		padding-right: 40rpx;
		image {
			width: 278rpx;
			height: 278rpx;
			object-fit: cover;
			border-radius: 50%;
		}
	}
	
	.gender{
		position: relative;
	}
	
	.gender-icon {
		position: absolute;
		right: -30rpx;
		top: -12rpx;
	}

	
</style>